<template>
<div class="auto-param-table">
    <div class="auto-param-table-header">
        <span class="header-span"><i class="iconfont icon-baogao"></i>{{this.modelDetail.summary.evaSummary.reportName || ''}}</span>
        <span class="header-span"><i class="iconfont icon-report-experiment"></i>{{expname || ''}}</span>
        <span class="header-span"><i class="iconfont icon-chuangjianren"></i>{{userInfo?userInfo.username:''}}</span>
        <!-- <span class="header-span"><i class="iconfont icon-shijian1"></i>{{userInfo?userInfo.lastLoginTime:''}}</span> -->
        <!-- <span class="header-span-special"><i class="iconfont icon-baogaojiedu"></i>报告解读</span> -->
    </div>
    <title-bar title="配置参数"></title-bar>
    <params-table :data="configData"></params-table>
    <title-bar title="模型参数"></title-bar>
    <span class="t-b-tip">
        <i class="el-icon-warning"></i>
        已做了自动排序处理,最佳超参数为下表第一行参数值, 标记指标为所选评估标准。
    </span>
    <params-table :data="modelData"></params-table>
</div>
</template>

<script>
import TitleBar from '@/components/TitleBar'
import ParamsTable from '@/components/ParamsTable'
import {
    mapGetters
} from 'vuex'
export default {
    name: 'AutoParamTable',
    components: {
        TitleBar,
        ParamsTable
    },
    computed: {
        ...mapGetters({
            modelDetail: 'common/getModelDetail'
        })
    },
    data () {
        return {
            expname: localStorage.getItem('experimentName'),
            userInfo: JSON.parse(localStorage.getItem('USER')) || '',
            configData: {
                rows: [],
                columns: []
            },
            modelData: {
                rows: [],
                columns: [],
                flag: true
            }
        }
    },
    created () {
        this.init()
    },
    methods: {
        init () {
            // 浮点型的数据保留四位小数
            for (let i = 0, l = this.modelDetail.summary.evaSummary.evaResultsTable.rows.length; i < l; i++) {
                for (let k in this.modelDetail.summary.evaSummary.evaResultsTable.rows[i]) {
                    if (+this.modelDetail.summary.evaSummary.evaResultsTable.rows[i][k]) {
                        this.modelDetail.summary.evaSummary.evaResultsTable.rows[i][k] = Math.floor(this.modelDetail.summary.evaSummary.evaResultsTable.rows[i][k] * 10000) / 10000
                    }
                }
            }
            this.configData = {
                rows: this.modelDetail.summary.evaSummary.tuningSettings.rows,
                columns: this.modelDetail.summary.evaSummary.tuningSettings.columns,
                pointIndex: this.modelDetail.summary.evaSummary.tuningSettings.pointIndex ? this.modelDetail.summary.evaSummary.tuningSettings.pointIndex[0] : null,
                flag: true
            }
            this.modelData = {
                rows: this.modelDetail.summary.evaSummary.evaResultsTable.rows.sort((a, b) => a.ID - b.ID),
                columns: this.modelDetail.summary.evaSummary.evaResultsTable.columns,
                pointIndex: this.modelDetail.summary.evaSummary.evaResultsTable.pointIndex ? this.modelDetail.summary.evaSummary.evaResultsTable.pointIndex[0] : null,
                flag: true
            }
            // 调整重点指标位置靠前
            if (this.modelData.pointIndex) {
                this.modelData.columns.splice(2, 0, this.modelData.columns.splice(this.modelData.pointIndex, 1)[0])
            }
        }
    }
}
</script>

<style lang="less" scoped>
.auto-param-table {
    .t-b-tip {
        display: flex;
        align-items: center;
        font-size: 12px;
        background: #FFFAEE;
        border: 1px solid #FFCC4B;
        border-radius: 4px;
        padding-right: 20px;
        color: rgba(51, 51, 51, .65);
        min-height: 35px;
        transform: translateY(-10px);
        .el-icon-warning {
            color: #F3B230;
            font-size: 18px;
            margin-left: 12px;
        }
    }
    .auto-param-table-header {
        margin-bottom: 24px;
        padding: 10px 0;
        border-bottom: 1px solid #DCDFE6;
        position: relative;
        .header-span {
            i {
                margin-right: 7px;
            }
            & + .header-span {
                margin-left: 24px;
            }
        }
        .header-span-special {
            position: absolute;
            right: 0;
            bottom: 1px;
            color: #1F8ADB;
            font-size: 12px;
            i {
                margin-right: 2px;
            };
        }
    }
}
</style>
